<script setup lang="ts">
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import LogoLink from "@/components/LogoLink.vue";
import request from '@/utils/request';

const router = useRouter();

// 注册表单数据
const registerForm = reactive({
  username: '',
  userPhone: '',
  password: '',
  confirmPassword: ''
});

// 处理注册
const handleRegister = async () => {
  // 用户名 非空 判断
  if (!registerForm.username) {
    alert('用户名不能为空');
    return;
  }
  //手机号 非空 & 合法判断
  if (!registerForm.userPhone) {
    alert('手机号不能为空');
    return;
  }
  if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(registerForm.userPhone)) {
    alert('请填写正确的手机号');
    return;
  }
  //检查密码是否6到20位，且只能包含字母、数字、下划线和连字符
  if (!/^[a-zA-Z0-9_-]{6,20}$/.test(registerForm.password)) {
    alert('密码长度必须在6到20位之间，且只能包含字母、数字、下划线和连字符');
    return;
  }
  // 检查密码和确认密码是否一致
  if (registerForm.password !== registerForm.confirmPassword) {
    alert('两次输入的密码不一致');
    return;
  }
  try {
    const userData = {
      userName: registerForm.username,
      userPhone: registerForm.userPhone,
      userPassword: registerForm.password,
      userSex: "2"
    };
    const response = await request.post('/user/register', userData);
    console.log('注册成功', response);
    alert('注册成功！');
    // 注册成功后跳转到首页
    router.push({name: 'Login'});
  } catch (error: any) {
    console.error('注册失败', error);
    if (error.response) {
      // 服务器返回了错误状态码
      console.error('错误状态:', error.response.status);
      console.error('错误信息:', error.response.data);
      alert(`注册失败: ${error.response.status} - ${error.response.statusText}`);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      alert('无法连接到服务器，请检查后端服务是否运行');
    } else {
      // 其他错误
      alert('注册失败，请重试');
    }
  }
};

// 处理登录跳转
const handleLogin = () => {
  router.push('/Login');
};
</script>

<template>
  <div class="common-layout">
    <!-- 全屏背景 -->
    <div class="Background"></div>

    <!-- 最外层容器 -->
    <el-container>
      <!-- 主体区域 -->
      <el-main class="Body">
        <!-- 注册表单区域 -->
        <div class="login-container">
          <div class="login-box">
            <LogoLink/>
            <p class="login-desc">注册新账号</p>
            <el-form class="form" :model="registerForm" label-width="0">
              <!-- 用户名输入框 -->
              <el-form-item>
                <el-input v-model="registerForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
              </el-form-item>

              <!-- 手机号输入框 -->
              <el-form-item>
                <el-input v-model="registerForm.userPhone" placeholder="手机号"
                          prefix-icon="el-icon-message"></el-input>
              </el-form-item>

              <!-- 密码输入框 -->
              <el-form-item>
                <el-input v-model="registerForm.password" type="password" placeholder="密码"
                          prefix-icon="el-icon-lock"></el-input>
              </el-form-item>

              <!-- 确认密码输入框 -->
              <el-form-item>
                <el-input v-model="registerForm.confirmPassword" type="password" placeholder="确认密码"
                          prefix-icon="el-icon-lock"></el-input>
              </el-form-item>

              <!-- 注册按钮 -->
              <el-form-item>
                <el-button type="primary" class="login-btn" block @click="handleRegister">注册</el-button>
              </el-form-item>

              <!-- 已有账号链接 -->
              <div class="register-link">
                <el-link type="primary" @click="handleLogin">← 已有账号？登录</el-link>
              </div>
            </el-form>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
/* 全屏背景 */
.Background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('@/assets/Homepage.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* 主体区域样式 */
.Body {
  width: 100%;
  min-height: 100vh;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.login-container {
  width: 400px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.login-box {
  text-align: center;
  position: relative; /* 启用相对定位 */
}

.login-desc {
  margin-bottom: 20px;
  color: #666;
}

.el-input {
  width: 100%; /* 或者指定具体值如 300px */
  height: 50px; /* 设置高度为 50px */
}

.form {
  margin-bottom: 20px;
}

.checkbox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.login-btn {
  width: 100%;
  height: 50px;
  background-color: #409eff;
  border: none;
  font-size: 20px;
}

.register-link {
  text-align: center;
}

.register-link a:hover {
  color: #3366cc;
}

.back-link {
  position: absolute;
  bottom: 0px;
  left: 0;
  font-size: 14px;
}

.back-link a {
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.back-link a:hover {
  color: #3366cc;
}
</style>
